<template>
  <div class="container">
    <div class="nav flex flex-row flex-x-center flex-y-center bd-bottom">
      <div class="item flex-x-center flex-y-center" v-bind:class="[active==0 ? 'active' : '']" @click='navtab(0)'>商品</div>
      <div class="item flex-x-center flex-y-center" v-bind:class="[active==1 ? 'active' : '']" @click='navtab(1)'>评价</div>
      <div class="item flex-x-center flex-y-center" v-bind:class="[active==2 ? 'active' : '']" @click='navtab(2)'>详情</div>
      <div class="item flex-x-center flex-y-center" v-bind:class="[active==3 ? 'active' : '']" @click='navtab(3)'>推荐</div>
     
    </div>
    <div class="scroll">
      <div class="good" ref="good">
        <el-carousel indicator-position="none" height="16rem">
          <el-carousel-item v-for="(item,index) in items" :key="index">
            <img :src="item.src">
          </el-carousel-item>
        </el-carousel>
        <div class="flex-col  info">
          <div class="flex-row">
            <div > 租金<span class="moneyColor">￥ 100/5天</span></div>
            <div class="mg-l">押金<span class="moneyColor">￥ 100/5天</span></div>
          </div>
          <div class="flex-row subtit">
            <div>参考价<span class="through">￥ 500</span></div>
            <div class="mg-l">人气值：185人收货</div>
          </div>
          <div class="subtit">LV法国</div>
          <div class="title">LV宴会礼服</div>
        </div>
      </div>

      <!-- 选择型号 -->
      <div class="xinghao bg-white mg-t">
      	<div class="flex flex-y-center pd">
      		<div class="flex-grow-1 flex-y-center">
      				<span class="type">选择</span><span class="mg-r-l moneyColor">规格</span><span>颜色</span><span>尺码详情</span>
      		</div>
      		<div class="flex-grow-0 flex-y-center">
      			<img src="@/assets/images/icon/right-arrow-gray.png">
      		</div>
      	</div>	
      	<div class="flex flex-y-center pd">
      	<div class="flex-grow-1 flex-y-center" @click="youhuijuanTag">
      				<span class="type">领劵</span><span class="mg-r-l moneyColor">店铺优惠</span><span class="subtit">满200元减10元</span>
      		</div>
      		<div class="flex-grow-0 flex-y-center">
      			<img src="@/assets/images/icon/right-arrow-gray.png">
      		</div>
      		
      	</div>
      	<div class="flex flex-y-center pd">
      		<span class="type">积分</span><span class="mg-l subtit">租赁此产品将爱的00积分</span>
      	</div>

      </div>



      <!-- 商品详情 -->
      <div class="xiangqing mg-t" ref="xiangqing">
        <div class="title flex flex-x-center flex-y-center">
          <div class="line-r"></div>
          <div class="mg-r-l moneyColor">商品详情</div>
          <div class="line-r"></div>
        </div>
        <img src="@/assets/images/2.jpg">
        <img src="@/assets/images/3.jpg">
      </div>

      <!-- 商品推荐 -->
      <div class="tuijian mg-t-b" ref="tuijian">
        <div class="bg-white mg-t-b pd  flex flex-x-center flex-y-center ">
          <div class="line-r"></div>
          <div class=" moneyColor mg-r-l">商品详情</div>
          <div class="line-r"></div>
        </div>
        <div class="list clearfix">
          <div class="item pd">
            <div class="flex-col bg-white">
              <img src="@/assets/images/2.jpg">
              <div class="title">商品详情商品详情商品详商品详详情商品详商品详情详情商品详商品详情情</div>
              <div class="flex-row info flex-y-center">
              	<div class="moneyColor flex-grow-1">￥ 39</div>
              	<div class="subtit flex-grow-0">399人已租赁</div>
              </div>
            </div>
          </div>
          <div class="item pd">
            <div class="flex-col bg-white">
              <img src="@/assets/images/2.jpg">
              <div class="title">商品详情商品详情商品详商品详详情商品详商品详情详情商品详商品详情情</div>
              <div class="flex-row info flex-y-center">
              	<div class="moneyColor flex-grow-1">￥ 39</div>
              	<div class="subtit flex-grow-0">399人已租赁</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 评论 -->
      <div class="pinglun mg-t bg-white pd" ref="pinglun">
      	<div class="flex pd-t-b">
      	   <div class="flex-grow-1">评论(888)</div>
      		<div class="flex-grow-0 subtit">好评率：97%</div>
      	</div>
      	<div class="flex flex-row item mg-b bd-bottom">
      		<div class="flex-grow-1" >
      			<div class="flex-row user flex-y-center flex-grow-0">
      				<img src="@/assets/images/3.jpg">
      				<span class="mg-l">赤子之心</span>
      			</div>
      			<div class="flex-grow-1 common">
      				<span>买家说</span>赤子之心赤子赤子赤子之心赤赤子之心赤赤子之心赤之心赤赤子之心赤赤子之心赤之心赤子之心
      			</div>
      		</div>
      		<div class="flex-grow-0">
      			<img src="@/assets/images/2.jpg">
      		</div>
      	</div>

      	<div class="flex flex-row item ">
      		<div class="flex-grow-1" >
      			<div class="flex-row user flex-y-center flex-grow-0">
      				<img src="@/assets/images/3.jpg">
      				<span class="mg-l">赤子之心</span>
      			</div>
      			<div class="flex-grow-1 common">
      				<span>买家说</span>赤子之心赤子赤子赤子之心赤赤子之心赤赤子之心赤之心赤赤子之心赤赤子之心赤之心赤子之心
      			</div>
      		</div>
      		<div class="flex-grow-0 mg-b">
      			<img src="@/assets/images/2.jpg">
      		</div>
      	</div>
      </div>

      <!--底部操作 -->
     <div class="bottomabr flex-row bg-white flex-x-center flex-y-center bd-top">
        <div class="flex-col flex-grow-0 kefu flex-x-center flex-y-center pd-r-l mg-r-l">
        	<img src="@/assets/images/icon/goods-detail-service.png">
        	<span>客服</span>
        </div>
        <div class="line"></div>
        <div class="flex-col flex-grow-0 shoucang flex-x-center flex-y-center pd-r-l mg-r-l">
        	<img src="@/assets/images/icon/goods-detail-love.png">
        	<span>收藏</span>
        </div>
        <div class="flex-grow-1 flex-x-center flex-y-center add" @click="add">加入衣袋</div>
        <div class="flex-grow-1 flex-x-center flex-y-center buy">立即购买</div>
     </div>
    </div>

    <!-- 弹出层 -->

    <div class="mask" v-if="maskHidden" @click="hidden"></div>
    <div class="popview bg-white pd" v-if="maskHidden">
    	<div class="flex">
    		<img class="flex-grow-0 mg-r" src="@/assets/images/2.jpg">
    		<div class="flex-grow-1 flex-col">
    				<div class="flex-grow-1 price"><span>$100/5天</span> <span class="mg-l through subtit">5000</span></div>
    				<div class="flex-grow-0">库存：50</div>
    				<div class="subtit flex-grow-0">商品编号：12354455</div>
    		</div>
    	</div>
    	<div class="mg tit">颜色</div>
    	<div class="yanse clearfix">
    		<div class="item">红色</div>
    		<div class="item active">红色</div>
    	</div>
    	<div class="mg tit">尺寸</div>
    	<div class="yanse clearfix">
    		<div class="item">170/L</div>
    		<div class="item active">175/M</div>
    	</div>
    	<div class="flex flex-row mg-t-b">
	    	<div class="flex-grow-1">购买数量</div>
	    	<div class="flex-grow-0">
	    		<i class="el-icon-minus" @click="changenum(-1,index)"></i>
	            <input value="1" type="number">
	            <i class="el-icon-plus" @click="changenum(1,index)"></i>
	    	</div>
    	</div>
    	<div class="btn" @click="addsubmit">确认</div>
    </div>


<van-popup v-model="showList" position="bottom" exchange-button-disabled="!jinyong" show-exchange-bar="!jinyong"                                exchange-button-text="兑换">
  <van-coupon-list
    :coupons="coupons"
    :chosen-coupon="chosenCoupon"
    @change="onChange"
    @exchange="onExchange"
  />
</van-popup>
  </div>
</template>
<script>
const coupon = {
 

  available: 1,
  discount: 0,
  denominations: 150,
  origin_condition: 0,
  reason: '222',
  name:'优惠券名称',
  value: 150,
  start_at: 1489104000,
  end_at: 1514592000
};

export default ({
  name: "shangpinxiangqing",
  data() {
    return {
      title:"兑换",
      jinyong:false,
      showList:false,
      chosenCoupon: -1,
      coupons: [coupon],
      showList:false,
      active: 1,
      maskHidden:false,
      items: [
        { src: "http://imgsrc.baidu.com/imgad/pic/item/34fae6cd7b899e51fab3e9c048a7d933c8950d21.jpg", id: 1 },
        { src: "http://imgsrc.baidu.com/imgad/pic/item/34fae6cd7b899e51fab3e9c048a7d933c8950d21.jpg", id: 2 },
        { src: "http://imgsrc.baidu.com/imgad/pic/item/34fae6cd7b899e51fab3e9c048a7d933c8950d21.jpg", id: 3 }
      ]
    }
  },
  methods: {
      navtab(index) {
         console.log(index);
      this.active = index;
      if (index == 0) {
      	 this.$refs.good.scrollIntoView();
      }else if(index == 1){
       
        this.$refs.pinglun.scrollIntoView();
      }else if(index == 2){
      	 this.$refs.xiangqing.scrollIntoView();
      }else if(index ==3){
      	this.$refs.tuijian.scrollIntoView();
      }else{
        console.log(index);
      }
      // this.$el.scrollIntoView(".pinglun")
    },
    // 
    add(){
    	this.maskHidden = true;
    },
    hidden(){
      this.maskHidden = false;
    },
    addsubmit(){
    	this.maskHidden = false;
    },
    // 修改购买数量
    changenum(index){
    	console.log(index);
    },
    //优惠券
    youhuijuanTag(){
        this.showList = true;
    },
     onChange(index) {
      console.log(index);
      this.showList = false;
      this.chosenCoupon = index;
    },
    onExchange(code) {
       console.log(code);
      this.coupons.push(coupon);
    }

  }
})

</script>
<style lang="less" scoped>
.nav {
  background-color: #fff;
  height: 2rem;
  width: 100%;
  .item {
    height: 100%;
    width: 100%;
    font-size: .6rem;
  }
  .active {
    color: #F75B93;
    border-bottom: 2px solid #F75B93;
  }
}

.scroll {
  position: fixed;
  overflow-y: auto;
  left: 0;
  width: 100%;
  top: 2rem;
  bottom: 2rem;
  .good {
    background-color: #fff;
    img {
      height: 100%;
      width: 100%;
    }
    .info {
      padding: .5rem;
      .title {
        font-size: .7rem;
      }
    }
  }
  .xiangqing {
    background-color: #fff;
    .title {
      padding: .5rem;
    }
    img {
      width: 100%;
    }
  }
}

.xinghao{
	img{
		width:.4rem;
		height:.7rem;
	}
	.type{
		font-size:.6rem;
	}
}

.tuijian {
  .item {
    width: 50%;
    float: left;
    img {
      width: 100%;
      height: 7rem;
    }
    .title {
      color: #000000;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      word-break: break-all;
      padding:.2rem .3rem;
      font-size:.6rem;
    }
    .info{
    	padding:0 .3rem;
    }
    .moneyColor{
    	font-size:.7rem;
    }
  }
}
.pinglun{
	.item{
		.user{
			img{
				height:2rem;
				width:2rem;
				border-radius:50%;
			}
		}
		img{
			height:4rem;
			width:4rem;
		}
		.common{
			color: #000000;
			overflow: hidden;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			word-break: break-all;
			padding:.2rem .3rem;
			font-size:.6rem;
			margin:.2rem 0;
			span {
			border: 1px solid #F75B93;
			color: #F75B93;
			font-size: .2rem;
			padding: 0 .1rem;
			margin-right: .3rem;
			}
		}

	}
}

.bottomabr{
	position:fixed;
	bottom:0;
	left:0;
	height:2rem;
	width:100%;
	.line{
		width:1px;
		height:1.5rem;
		background-color:#eee;
	}
	img{
		width:.9rem;
		height:.8rem;
	}
	.add{
		background-color:#f09a14;
		color:#fff;
		height:100%;
		font-size:.7rem;
	}
	.buy{
		background-color:#F75B93;
		color:#fff;
		height:100%;
		font-size:.7rem;
	}
}

.mask{
	position:fixed;
	left:0;
    top:0;
	background-color:rgba(0, 0, 0, 0.7);
	width:100%;
	height:100%;
	z-index:999;
}
.popview{
	position:fixed;
	bottom:0;
	left:0;
	width:100%;
	height:auto;
	z-index:9999;
	font-size:.6rem;
	transition:height 2s;
-moz-transition:height 2s;
-webkit-transition:height 2s; 
-o-transition:height 2s; 
	img{
		height:4rem;
		width:4rem;
	}
	.price{
		font-size:.8rem;
		.subtit{
			font-size:.6rem;
		}
	}
	.yanse{
		.item{
			float:left;
			padding:.3rem .5rem;
			margin-right:.5rem;
			border:1px solid #eee;;
			color:#666;
 

		}
		.active{
				background-color:#F75B93;
				color:#fff;
			}
	}
	input{
		border:none;
		width:3rem;
		text-align:center;
	}
	.btn{
        width:90%;
        margin-left:5%;
        background-color:#F75B93;
        border-radius:5px;
        color:#fff;
        text-align:center;
        padding:.3rem;
	}

}

</style>
